<template>
  <a-select v-model:value="stationName" show-search allowClear :placeholder="_placeholder"
            :filter-option="filterTrainCodeOption"
            @change="onChange" :style="`width:${_width}`">
    <a-select-option v-for="item in stationList" :key="item.id" :value="item.name" :label="item.name">
      {{ item.name }}
    </a-select-option>
  </a-select>
</template>

<script setup lang="ts" name="TrainSelect">
import {onMounted, ref} from "vue";
import {notification} from "ant-design-vue";
import {isEmpty} from "@/utils/tools.ts";
import {queryList} from "@/api/station";

const stationName = defineModel<any>("stationName");
const stationList = ref<any[]>([]);

const props = defineProps(["width","placeholder"]);

const _placeholder = ref<string>(props.placeholder);
if (isEmpty(_placeholder)) {
  _placeholder.value = "请选择车站"
}

const _width = ref<string>(props.width);
if (isEmpty(_width)) {
  _width.value = "100%"
}


const emit = defineEmits(["change"])

// @ts-ignore
const filterTrainCodeOption = (input: string, option: any) => {
  return option.label.includes(input);
}

const onChange = (value: string) => {
  emit("change", value);
}
const getAllTrains = async () => {
  try {
    const result = await queryList();
    if (result.success) {
      stationList.value = result.data as any;
    } else {
      notification.error({message: "获取所有车次失败", description: result.message});
    }
  } catch (e: any) {
    notification.error({message: "获取所有车次失败", description: e.message});
  }
}

onMounted(() => {
  getAllTrains()
})

</script>


<style scoped>

</style>